<template>
  <div>
    <!-- head -->
    <div class="layout__head flexbox">
      <!-- logo -->
      <div class="layout__logo">
        <!-- <img src="../assets/images/mr_logo.png" alt height="31" /> -->
      </div>
      <!-- top menu -->
      <div class="flex">
        <ul class="layout-top__menu">
          <li
            v-for="(item, index) in topMenu"
            :key="index"
            class="fl mrgt5 transition__all_3s"
            :class="{ active: index == firstKey }"
          >
            <!-- <a :href="item.alink == '#' ? 'javascript:;':(item.http == true ? item.alink:'#' + item.alink)" @click="topMenuFn(item.id, item.alink, false, item)"><i :class="item.icon"></i> {{ item.menuname }}</a> -->
            <a @click="topMenuFn(item.id, item.alink, index, item)">
              <i :class="item.icon || 'iconfont icon-shuju'"></i>
              {{ item.name }}
            </a>
          </li>
        </ul>
      </div>
      <!-- right button -->
      <div class>
        <!-- <img src="../assets/images/infoicon.png" alt width="34" height="34" /> -->
      </div>
    </div>
    <!-- head end -->

    <!-- base info -->

    <!-- base info end -->
    <!-- 菜单开始 -->
    <div class="meau_list transition__all_3s" v-show="childMenu.length > 0">
      <div
        class="menu_Item"
        @click="clickSecond(item, index)"
        :class="{ item_active: secondIndex == firstKey + ',' + index }"
        v-for="(item, index) in childMenu"
        :key="item.id"
      >
        {{ item.name }}
        <div class="submenu_box" v-show="item.menus&&item.menus.length > 0">
          <div
            class="submenu_item"
            :class="{
              submenu_active: thirdIndex == firstKey + ',' + index + ',' + i,
            }"
            v-for="(last, i) in item.menus"
            :key="last.id"
            @click="changeMenu(item, last, index, i)"
          >{{ last.name }}</div>
        </div>
      </div>
    </div>
    <!-- 菜单结束 -->
    <!-- 面包屑 -->

    <div
      id="content"
      class="layout__content flexYbox transition__all_3s"
      :style="{
        top: childMenu.length > 0 ? '90px' : '40px',
        left: '0px',
        bottom: '6px',
      }"
    >
      <!-- content -->
      <!-- 面包屑 tab end -->
      <div class="flex con" style="width: calc(100% - 30px); margin: auto">
        <div class="_con">
          <router-view v-if="isRouterAlive" />
          <!-- <keep-alive>
            <router-view v-if="isRouterAlive" />
          </keep-alive>-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  components: {},
  data() {
    return {
      crumbList: [],
      firstKey: 0,
      secondIndex: '1,1',
      thirdIndex: '',

      childMenu: [],
      versonCode: window.versonCode,
      topMenu: [], // 顶部一级菜单数据
      // 当前选中的一级菜单键值
      info: {}, // 用户基本数据
      infoTime: null,
      show: 1,
      showType: 1,
      // 面包屑tab
      isRouterAlive: true,
      downUrl: process.env.VUE_APP_BASE_URL,
      allMenus: []
    }
  },
  created() {
    this.topMenu = [
      {
        name: '表单',
        alink: '#',
        id: '1',
        menus: [
          {
            name: '下拉框',
            alink: '/select',
            id: '1-1',
            menus: []
          },
          {
            name: '输入框',
            id: '1-2',
            alink: '/treetable',
            menus: []
          },
          {
            name: '复选框',
            id: '1-3',
            alink: '/checked',
            menus: []
          },
          {
            name: '文本输入框',
            id: '1-4',
            alink: '/textarea',
            menus: []
          }
        ]
      },
      {
        name: '表格',
        alink: '#',
        id: '2',
        menus: [
          {
            name: '普通表格',
            alink: '/table',
            id: '2-1',
            menus: []
          },
          {
            name: '树表格',
            id: '2-2',
            alink: '/treetable',
            menus: []
          },
          {
            name: '透视表',
            id: '2-3',
            alink: '/pivotTable',
            menus: []
          },
          {
            name: '透视格',
            id: '2-4',
            alink: '/pivotGrid',
            menus: []
          },
          {
            name: '表格动态分页',
            id: '2-5',
            alink: '/tablePage',
            menus: []
          }
        ]
      },
      {
        name: 'g2图表',
        alink: '#',
        id: '3',
        menus: [
          {
            name: 'G2Plot',
            alink: '/chart',
            id: '3-1',
            menus: []
          },
          {
            name: 'g2',
            id: '3-2',
            alink: '/g2chart',
            menus: []
          },
          {
            name: '自定义',
            id: '3-3',
            alink: '/customChart',
            menus: []
          }
        ]
      },
      {
        name: '弹窗',
        id: '4',
        alink: '/dialog',
        menus: []
      },
      {
        name: '空数据',
        id: '5',
        alink: '/tsEmpty',
        menus: []
      }
    ]
    this.childMenu = this.topMenu[0].menus
  },
  mounted() {},
  computed: {},
  methods: {
    // 顶部一级菜单点击
    topMenuFn(id, url, index, obj) {
      this.firstKey = index
      if (url != '#') {
        this.$router.push({ path: url })
        this.crumbList = [obj]
        this.childMenu = []
        this.removeActive()
      }
      if (obj.menus && obj.menus.length > 0) {
        this.childMenu = obj.menus
      } else {
        this.childMenu = []
      }
    },
    // 点击第三层
    changeMenu(item, last, index, i) {
      this.crumbList = [item, last]
      sessionStorage.setItem('crumb', JSON.stringify(this.crumbList))
      this.getActive(item, last, index, i)
      this.$router.push({ path: last.alink })
    },
    //点击第二层
    clickSecond(item, index) {
      if (item.alink == '#') {
        return
      } else {
        this.removeActive()
        this.$router.push({ path: item.alink })
        this.secondIndex = this.firstKey + ',' + index
        this.crumbList = [item]
        sessionStorage.setItem('crumb', JSON.stringify(this.crumbList))
      }
    },
    // 获取激活状态
    getActive(item, last, index, i) {
      this.secondIndex = this.firstKey + ',' + index
      this.thirdIndex = this.firstKey + ',' + index + ',' + i
    },
    // 去除激活状态
    removeActive() {
      this.secondIndex = ''
      this.thirdIndex = ''
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
@import url('../../assets/layout.css');
.crumbNav {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #666;
  width: calc(100% - 20px);
  margin: auto;
}
.design-btn {
  margin-left: auto;
}
/* 菜单 */
.top_menu-right {
  text-align: right;
  line-height: 40px;
  margin-right: 10px;
}
.meau_list {
  height: 35px;
  width: calc(100% - 10px);
  margin: 10px 5px 5px 5px;
  background: #fff;
  display: flex;
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
  animation: sideIn 0.5s ease;
}
.menu_Item {
  line-height: 35px;
  padding: 0 20px;
  font-size: 13px;
  color: rgb(69, 106, 143);
  width: auto;
  cursor: pointer;
  position: relative;
}
.item_active {
  border-bottom: 2px solid #0079fb;
  color: #0079fb;
  background: #f4f9fe;
}

.menu_Item:hover {
  color: #0079fb;
}
.menu_Item:hover .submenu_box {
  display: block;
  transition: all 1s ease;
  animation: sideOut 0.7s ease;
}
@keyframes sideOut {
  from {
    opacity: 0.6;
    top: 30px;
  }
  to {
    opacity: 1;
    top: 35px;
  }
}
@keyframes sideIn {
  from {
    opacity: 0.7;
    height: 0px;
  }
  to {
    opacity: 1;
    height: 35px;
  }
}
.submenu_box {
  display: none;
  position: absolute;
  top: 35px;
  left: 0;
  border: 1px rgba(0, 0, 0, 0.1) solid;
  z-index: 9999;
  min-width: 120%;
  height: auto;
  padding: 3px 5px;
  font-size: 12px;
  background: #fff;
  transition: all 1s ease;
}

.submenu_item {
  /* width: 100%; */
  width: auto;
  height: 30px;
  color: rgb(69, 106, 143);
  box-sizing: border-box;
  padding: 1px 4px;
  line-height: 30px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border_color);
  background: #fff;
  &:last-child {
    border-bottom: 0;
  }
}
.no_border {
  border-bottom: none;
}
.submenu_active {
  color: #0079fb;
}
.submenu_item:hover {
  background: #eef6ff;
}
</style>